import React, { useState } from "react";
import { DualAxes,WordCloud } from '@ant-design/plots';
import { PageHeader} from "antd";
import cityThroughModel from "../models/cityThroughModel";
import '../App.css';


function Flow_all(props) {
    const [data, setData] = useState([]);
    React.useEffect(async () => {
        //分页查询时间段内各城市航班吞吐量
        let getCThroughputList = async () => {

            var arrayModels = [];
            const response = await fetch(
                'http://flightapi.xiexianbo.xin/airPort/getCThroughputList?pageSize=1000',
                {
                    method:'GET'
                }
            )
            const data  = await response.json();
            const data1 = await data.data.data;
            data1.forEach((value)=>{
                let model = new cityThroughModel(value.aptCcity,value.aptName,value.enterNum,value.exitNum,value.total);
                arrayModels.push(model);
            });
            arrayModels.forEach((value)=>{
                console.log(value);
            });
            setData(arrayModels);
        }
        getCThroughputList();
    }, []);

    const config1 = {
        width:800,
        height:700,
        padding:'auto',
        data: [data, data],
        xField: 'aptName',
        yField: ['enterNum', 'exitNum'],
        xAxis: {
            label: {
                autoHide: true,
                autoRotate: true,
            },
        },
        meta: {
            aptName: { alias: '机场' },
            total: { alias: '总人流量' },
            enterNum: { alias: '进人流量' },
            exitNum: { alias: '出人流量' },
        },
        legend: {
            position: 'top',
        },
        geometryOptions: [
            {
                geometry: 'line',
                smooth: false,
                color: '#5B8FF9',
                lineStyle: {
                    lineWidth: 3,
                    lineDash: [5, 5],
                },
            },
            {
                geometry: 'line',
                smooth: true,
                color: '#5AD8A6',
                lineStyle: {
                    lineWidth: 4,
                    opacity: 0.5,
                },
                point: {
                    shape: 'circle',
                    size: 1,
                    style: {
                        opacity: 0.5,
                        stroke: '#5AD8A6',
                        fill: '#fff',
                    },
                },
            },
        ],
        slider: {
            start: 0.2,
            end: 0.8,
            height:40,
        },
    };

    return (
        <>
            <PageHeader
                className="site-page-header"
                onBack={() => {props.history.goBack()}}
                title="进出人流量"
            />,
            <DualAxes {...config1} ></DualAxes>
            <div className="div2"></div>
        </>
    );
}
export default Flow_all;
